iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

JavaScript 基礎修練系列 第 22

[Day22] JavaScript - Fetch API

  • 分享至 

  • xImage
  •  

第18篇有提到過Fetch的用法(連結),這篇要實際使用Fetch來做簡單的Api串接。

  1. 首先介紹一款免費的API - Joke API,可透過query讓此API隨機產生笑話。
    Joke API網站: https://sv443.net/jokeapi/v2/

    點進去上方連結後,找到Try it out here的部分,選擇你有興趣的笑話類型、語言等,只有輸出格式需選擇json,下方即會根據你所選的條件來產生出URL:https://v2.jokeapi.dev/joke/Programming

    這段網址即是我們的endpoint,意思是我們須透過這個endpoint來跟Joke API裡的資料庫取得笑話。

    https://ithelp.ithome.com.tw/upload/images/20210922/20141293peQeFrxMCK.png

    接著以下即使用JavaScript的fetch來取得Joke Api的資料:

    async function getJoke() {
      let data = await fetch("https://v2.jokeapi.dev/joke/Programming");
      let parseData = await data.json();
      console.log(parseData);
    }
    
    getJoke();
    

    輸出結果:
    https://ithelp.ithome.com.tw/upload/images/20210922/20141293oEwlpAPKcA.png


上一篇
[Day21] JavaScript - Event object (事件物件)
下一篇
[Day23] JavaScript 函式庫 - React
系列文
JavaScript 基礎修練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言